<template>
  <div class="adr">
    <!-- 头部 -->
    <app-headers></app-headers>
    <div class="addAddr" v-show="isAddr">
      <!-- 添加地址按钮 -->
      <input type="button" value="添加新地址" @click="addnewAddr" />

      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        @edit="onEdit"
        @select="setDefault"
        default-tag-text="当前使用"
      />
    </div>

    <div v-show="!isAddr">
      <!-- 地址编辑   
        :area-list          地区列表
        show-postal         是否显示邮政编码
        show-delete         是否显示删除按钮
        show-set-default    是否显示默认地址栏
        show-search-result  是否显示搜索结果
        :search-result      详细地址搜索结果
        :area-columns-placeholder  地区选择列占位提示文字
        save                 点击保存按钮时触发
        delete               确认删除地址时触发
     -->
      <van-address-edit
        :address-info="AddressInfo"
        :area-list="areaList"
        show-delete
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
      <p style="margin: 10px 0  10px 16px;">
        <b>温馨提示</b>
      </p>
      <p style="font-size: 13.5px;margin: 0 16px 0 16px;">
        部分合作快递要求收件人实名认证收寄包裹，请您填写真实姓名以便发货，感谢您的理解与配合!
      </p>
    </div>
  </div>
</template>

<script>
import appHeaders from "../components/headers";
import AeraInfo from "../assets/js/area";
import usersApi from "../api/userApi";
import { getUser } from "../utils/auth.js";
export default {
  data() {
    return {
      isAddr: true,
      // 地址编辑
      areaList: AeraInfo,
      // 地址列表
      chosenAddressId: 1,
      list: [
        // id	        每条地址的唯一标识	     number | string
        // name	        收货人姓名	            string
        // tel	        收货人手机号	        number | string
        // address	    收货地址	            string
        // isDefault	是否为默认地址
      ],
      // 编辑的初始地址
      AddressInfo: {
        id: "",
        name: "",
        tel: "",
        areaCode: "",
        addressDetail: "",
        isDefault: ""
      }
    };
  },
  methods: {
    // 添加新地址按钮
    addnewAddr() {
      // 判断是否是修改地址
      this.isEdit = false;
      // 切换至修改列表
      this.isAddr = false;
    },

    // 地址编辑的方法：保存添加
    onSave(content) {
      // 判断是否设置为默认值了
      if (content.isDefault) {
        for (let i = 0; i < this.list.length; i++) {
          // 将之前的默认值设置为false
          if (this.list[i].isDefault) {
            this.list[i].isDefault = false;
          }
        }
      }

      // 是修改地址,需要删除之前项的；
      if (this.isEdit) {
        let newList = this.list.filter(item => {
          // filter方法的返回值取决于内容的return值
          // true:保留
          // false:删除
          if (content.id === item.id) {
            return false; //删除
          } else {
            return true; //保留
          }
        });
        this.list = newList;
      }

      let addAddr = {
        id: this.isEdit ? content.id : this.list.length + 1,
        name: content.name,
        tel: content.tel,
        areaCode: content.areaCode,
        province: content.province,
        city: content.city,
        county: content.county,
        addressDetail: content.addressDetail,
        address:
          content.province +
          content.city +
          content.county +
          content.addressDetail,
        isDefault: content.isDefault
      };
      this.list.unshift(addAddr);
      // 发送请求
      usersApi
        .getuser({ username: getUser() })
        .then(res => {
          // 查询成功
          if (res.data.code) {
            // console.log(res.data.data[0]._id);
            // 拿到用户_id,发送请求 修改用户信息
            usersApi
              .edit(res.data.data[0]._id, this.list)
              .then(res => {
                // 轻提示
                for (let i = 0; i < this.list.length; i++) {
                  // 将默认设置为高亮
                  if (this.list[i].isDefault) {
                    this.chosenAddressId = this.list[i].id;
                  }
                }

                this.isEdit
                  ? this.$toast("地址修改成功")
                  : this.$toast("地址添加成功"),
                  (this.isAddr = true);
              })
              .catch(err => {
                console.log("出错了" + err);
              });
          }
        })
        .catch(err => {
          console.log("出错了" + err);
        });

      // 清空编辑
      this.AddressInfo.id = "";
      this.AddressInfo.name = "";
      this.AddressInfo.tel = "";
      this.AddressInfo.areaCode = "";
      this.AddressInfo.addressDetail = "";
      this.AddressInfo.isDefault = "";
      // 切换至修改列表
      this.isAddr = false;
    },

    // 地址编辑的方法：删除   如果从修改过来，content就是AddressInfo；
    onDelete(content) {
      // 新增地址的时候
      if (!this.isEdit) {
        this.$toast("该地址尚未添加成功，不需要删除");
        return;
      }
      let newList = this.list.filter(item => {
        // filter方法的返回值取决于内容的return值
        // true:保留
        // false:删除
        if (content.id === item.id) {
          return false; //删除
        } else {
          return true; //保留
        }
      });
      this.list = newList;
      // 发送请求，删除数据
      usersApi
        .getuser({ username: getUser() })
        .then(res => {
          // 查询成功
          if (res.data.code) {
            // console.log(res.data.data[0]._id);
            // 拿到用户_id,发送请求 修改用户信息
            usersApi
              .edit(res.data.data[0]._id, this.list)
              .then(res => {
                // 轻提示
                if (res.data.code) {
                  this.$toast("该地址删除成功");
                } else {
                  this.$toast("该地址删除失败");
                }
                this.isAddr = true;
              })
              .catch(err => {
                console.log("出错了" + err);
              });
          }
        })
        .catch(err => {
          console.log("出错了" + err);
        });
      // 清空编辑
      this.AddressInfo.id = "";
      this.AddressInfo.name = "";
      this.AddressInfo.tel = "";
      this.AddressInfo.areaCode = "";
      this.AddressInfo.addressDetail = "";
      this.AddressInfo.isDefault = "";
      // 切换至修改列表
      this.isAddr = false;
    },

    // 地址列表,修改
    onEdit(item, index) {
      // console.log(item,index);
      this.AddressInfo.id = this.list[index].id; //给他一个id
      this.AddressInfo.name = item.name;
      this.AddressInfo.tel = item.tel;
      this.AddressInfo.areaCode = item.areaCode;
      this.AddressInfo.addressDetail = item.addressDetail;
      this.AddressInfo.isDefault = item.isDefault;
      // 判断是否是修改
      this.isEdit = true;
      // 是否切换至修改列表
      this.isAddr = false;
    },

    // 地址列表，切换选中地址
    setDefault(content, index) {
      // 不是点击当前高亮项，才会作用
      if (this.chosenAddressId !== content.id) {
        // 定义一个修改默认地址的对象
        let setAddr = {
          id: content.id,
          name: content.name,
          tel: content.tel,
          areaCode: content.areaCode,
          province: content.province,
          city: content.city,
          county: content.county,
          addressDetail: content.addressDetail,
          address:
            content.province +
            content.city +
            content.county +
            content.addressDetail,
          isDefault: true
        };
        //需要删除之前项的；
        let newList = this.list.filter(item => {
          // filter方法的返回值取决于内容的return值
          // true:保留
          // false:删除
          if (content.id === item.id) {
            return false; //删除
          } else {
            item.isDefault = false;
            return true; //保留
          }
        });
        //将删除了之前的项给this.list；
        this.list = newList;
        // 再将修改了默认地址的添加回去
        this.list.unshift(setAddr);

        // 发送请求
        usersApi
          .getuser({ username: getUser() })
          .then(res => {
            // 查询成功
            if (res.data.code) {
              // console.log(res.data.data[0]._id);
              // 拿到用户_id,发送请求 修改用户信息
              usersApi
                .edit(res.data.data[0]._id, this.list)
                .then(res => {
                  for (let i = 0; i < this.list.length; i++) {
                    // 将默认设置为高亮
                    if (this.list[i].isDefault) {
                      this.chosenAddressId = this.list[i].id;
                    }
                  }
                  // 提示
                  this.$toast("切换地址成功");
                })
                .catch(err => {
                  console.log("出错了" + err);
                });
            }
          })
          .catch(err => {
            console.log("出错了" + err);
          });
      }
    },

    // 初始化获取用户地址数据,渲染this.list；
    getAddrList() {
      usersApi
        .getuser({ username: getUser() })
        .then(res => {
          // 查询成功
          // console.log(res.data.data[0].addList);
          if (res.data.data[0].addList) {
            this.list = res.data.data[0].addList;
            for (let i = 0; i < this.list.length; i++) {
              // 将默认设置为高亮
              if (this.list[i].isDefault) {
                this.chosenAddressId = this.list[i].id;
              }
            }
          }
        })
        .catch(err => {
          console.log("出错了" + err);
        });
    }
  },
  components: {
    appHeaders
  },
  created() {
    //   初始化获取地址数据列表
    this.getAddrList();
  }
};
</script>

<style scoped lang='scss'>
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";

.addAddr {
  padding: 0 v(10);
  background-color: #fff;
  overflow: hidden;
  input {
    width: 100%;
    height: v(37);
    line-height: v(37);
    border: none;
    text-align: center;
    background-color: #d70057;
    color: #fff;
    font-size: v(14);
    font-weight: bold;
    margin: v(10) 0;
  }
  .van-address-item {
    margin-top: v(15);
  }
  .van-address-list__bottom {
    display: none;
  }
  .van-address-item__address {
    width: v(270);
  }
}

.van-tag--danger {
  background-color: #d70057;
}
.van-tag--round {
  border-radius: v(4);
}
.van-tag {
  right: v(-10);
  font-size: v(12);
}

// vue样式穿透 ::v-deep；使用场景，在使用scoped局部环境下
::v-deep .van-address-edit {
  .van-switch--on {
    background-color: #d70057;
  }
  .van-address-edit__buttons {
    padding: 0 v(4);
    .van-button {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      height: v(37);
      width: v(165);
      margin: v(30) 0 v(10) v(15);
      padding: 0;
      font-size: v(16);
      line-height: v(37);
      text-align: center;
      border-radius: v(2);
      cursor: pointer;
      -webkit-transition: opacity 0.2s;
      transition: opacity 0.2s;
      -webkit-appearance: none;
    }
    .van-button--danger {
      background-color: #d70057;
    }
  }
}
</style>
